<!--
 * @Author: NaturalHulk 2066634567@qq.com
 * @Date: 2024-04-08 14:42:04
 * @LastEditors: NaturalHulk 2066634567@qq.com
 * @LastEditTime: 2024-05-28 19:11:57
 * @FilePath: /hanchuan-272-web/src/views/template/overallsignboard/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup name="purchaseboard">
  import Echarts from "./echarts.vue";
  import {
    GetRunInfoAPI,
    GetStatusInfoAPI,
    GetCountInfoAPI,
    GetAlarmTopAPI,
    GetRepairTopAPI,
  } from "@/api/board/comprehensive";
  import {
    salesChartOpt,
    lineChartOpt,
    deviceChartOpt,
    giveAlarmOpt,
  } from "./echarts.js";
  import gj from "@/assets/board/告警.png";
  import gd from "@/assets/board/维保工单管理.png";
  import wx from "@/assets/board/维修.png";
  const router = useRouter();
  const { proxy } = getCurrentInstance();

  const state = reactive({
    nowTime: null,
    // 销售订单进度加载
    salesOrderColumnLoading: false,
    salesChartLoading: false,
    // 1:原料，2：成品
    type: 1,
  });
  /**
   * 维修
   */

  /**
   * 设备信息
   */
  const deviceList = ref([]);

  const getStatusInfo = async () => {
    try {
      const { data: result } = await GetStatusInfoAPI();
      deviceList.value = result.map((t) => {
        return {
          title: t.title,
          option: deviceChartOpt(t.colorList, t.runDevice),
        };
      });
    } catch (err) { }
  };
  /**
   * eacharts
   */
  const eachartsData = reactive({
    salesChart: null,
  });

  //轮播表ref
  const tabConfigRef = ref(null);

  /**
   * 设备运行状态 ---------------------SAT--------------------------->
   */
  const salesOrderColumnRef = ref(null);
  const salesOrderColumn = reactive({
    header: ["序号", "设备编码", "状态", "设备名称", "设备位置"],
    data: [],
    align: ["center", "center", "center", "center", "center"],
    headerBGC: "#001054",
    index: false, //序号
    rowNum: 15, //表行数
    oddRowBGC: "rgba(0,0,0,0)", // 奇数颜色（透明）
    evenRowBGC: "#182f82", // 偶数颜色（透明）
  });

  /**
   * 获取设备运行
   */
  const getRunInfo = async () => {
    try {
      const { data: result } = await GetRunInfoAPI();
      const arr = result.map((t, i) => {
        return [
          `<div >${i + 1}</div>`,
          `<div >${t.deviceCode || "--"}</div>`,
          `<div style="height: 100%;display: flex;align-items: center;justify-content: center;" ><div style="height:25px;line-height:25px; background-color:${t.status == "在线" ? "#00d368" : "#ff0000"
          }; width: 50%;text-align: center;border-radius: 3px">${t.status || "--"
          }</div></div>`,
          `<div >${t.deviceName || "--"}</div>`,
          `<div style="overflow: hidden;">${t.place || "--"}</div>`,
        ];
      });

      salesOrderColumn.data = arr;
    } catch (err) { }
  };

  const getRunInfoTwo = async () => {
    try {
      const { data: result } = await GetRunInfoAPI();
      const arr = result.map((t, i) => {
        return [
          `<div >${i + 1}</div>`,
          `<div >${t.deviceCode || "--"}</div>`,
          `<div style="height: 100%;display: flex;align-items: center;justify-content: center;" ><div style="height:25px;line-height:25px; background-color:${t.status == "在线" ? "#00d368" : "#ff0000"
          }; width: 50%;text-align: center;border-radius: 3px">${t.status || "--"
          }</div></div>`,
          `<div >${t.deviceName || "--"}</div>`,
          `<div style="overflow: hidden;">${t.place || "--"}</div>`,
        ];
      });

      salesOrderColumnRef.value.updateRows(arr)
    } catch (err) { }
  };
  /**
   * 统计信息
   */
  const countInfo = ref({});
  const getCountInfo = async () => {
    try {
      let { data: result } = await GetCountInfoAPI();
      countInfo.value = result;
    } catch (err) { }
  };

  /**
   * 设备告警前10 ---------------------SAT--------------------------->
   */
  const alarmOption = ref({});
  const getAlarmTop = async () => {
    try {
      const { data: result } = await GetAlarmTopAPI();
      alarmOption.value = giveAlarmOpt(result);
    } catch { }
  };
  /**
   * 库存总览 ---------------------END--------------------------->GetRepairTopAPI
   */
  const repairOption = ref({});
  const getRepairTop = async () => {
    try {
      const { data: result } = await GetRepairTopAPI();
      repairOption.value = giveAlarmOpt(result);
    } catch { }
  };
  const staerTime = ref(null);
  //系统时间
  staerTime.value = setInterval(() => {
    const date = new Date();
    const year = date.getFullYear();
    let month = date.getMonth() + 1;
    month = month < 10 ? `0${month}` : month;
    let day = date.getDate();
    day = day < 10 ? `0${day}` : day;
    let hour = date.getHours();
    hour = hour < 10 ? `0${hour}` : hour;
    let minute = date.getMinutes();
    minute = minute < 10 ? `0${minute}` : minute;
    let second = date.getSeconds();
    second = second < 10 ? `0${second}` : second;
    // 加载现在时
    const current = ` ${hour}:${minute}:${second}`;
    state.nowTime = current;
  }, 100);

  const timeer = ref(null);

  /**
   * 库存总览 定时器 15秒改变 成品 原料
   */
  const inventoryOverviewTime = ref(null);
  timeer.value = setInterval(() => {
    // getInventoryOverview()
  }, 30000);

  // 5分钟更新一次

  //离开页面关闭定时器
  onUnmounted(() => {
    clearInterval(timeer.value);
  });

  /**
   * 数据初始化
   */
  const initData = () => {
    getRunInfo();
    getStatusInfo();
    getCountInfo();
    getAlarmTop();
    getRepairTop();
  };

  const initDataTwo = () => {
    getRunInfoTwo();
    getStatusInfo();
    getCountInfo();
    getAlarmTop();
    getRepairTop();
  }
  /**
   * 返回首页
   */
  const back = () => {
    router.push("/index");
  };
  /**
   *
   */
  onMounted(() => {
    initData();
    timeer.value = setInterval(() => {
      initDataTwo();
    }, 10000);
  });

// fullscreenCheck();
</script>
<template>
  <div class="three">
    <dv-full-screen-container class="box">
      <!-- 头部 -->
      <div class="header">
        <div class="title">设备管理看板</div>
        <div class="time">{{ state.nowTime }}</div>
        <div class="home">
          <dv-button border="Border2" color="#2fd5f1" @click="back">首页</dv-button>
        </div>
      </div>
      <!-- 中间 -->
      <div class="main">
        <dv-border-box8 backgroundColor="rgba(0,0,0,0)" class="border-box8 main-left">
          <div class="title-list">设备运行状态</div>
          <div v-loading="state.salesOrderColumnLoading" style="height: 95%">
            <dv-scroll-board style="width: 100%; height: 100%" ref="salesOrderColumnRef" class="scroll-board"
              :config="salesOrderColumn" />
          </div>
        </dv-border-box8>
        <div class="main-in">
          <div class="main-in-top">
            <dv-border-box8 class="main-in-top-left" backgroundColor="rgba(0,0,0,0)">
              <div style="
                  display: flex;
                  height: 100%;
                  width: 100%;
                  justify-content: space-evenly;
                  align-items: center;
                ">
                <div class="echarts" v-for="(item, index) in deviceList" :key="index">
                  <Echarts :option="item.option" height="40%" :loading="true" />
                  <div>{{ item.title }}</div>
                </div>
              </div>
            </dv-border-box8>
            <div class="main-in-top-right">
              <div class="main-in-top-righ-list">
                <div class="img">
                  <img :src="gj" alt="" style="width: 100%; height: 100%" />
                </div>
                <div style="
                    display: flex;
                    height: 100%;
                    justify-content: center;
                    flex-direction: column;
                  ">
                  <div class="num">{{ countInfo.alarmNum }}</div>
                  <div class="main-in-top-righ-list-title">实时告警</div>
                </div>
              </div>
              <div class="main-in-top-righ-list">
                <div class="img">
                  <img :src="gd" alt="" style="width: 100%; height: 100%" />
                </div>
                <div style="
                    display: flex;
                    height: 100%;
                    justify-content: center;
                    flex-direction: column;
                  ">
                  <div class="num">{{ countInfo.maintenanceNum }}</div>
                  <div class="main-in-top-righ-list-title">待维保工单</div>
                </div>
              </div>
              <div class="main-in-top-righ-list">
                <div class="img">
                  <img :src="wx" alt="" style="width: 100%; height: 100%" />
                </div>
                <div style="
                    display: flex;
                    height: 100%;
                    justify-content: center;
                    flex-direction: column;
                  ">
                  <div class="num">{{ countInfo.repairNum }}</div>
                  <div class="main-in-top-righ-list-title">待维修工单</div>
                </div>
              </div>
            </div>
          </div>

          <div class="main-in-bottom">
            <dv-border-box8 class="main-in-bottom-left" backgroundColor="rgba(0,0,0,0)">
              <div class="title-list">设备告警排行前十（累计）</div>
              <Echarts :option="alarmOption" height="80%" :loading="true" />
            </dv-border-box8>
            <dv-border-box8 class="main-in-bottom-right" backgroundColor="rgba(0,0,0,0)">
              <div class="title-list">设备维修排行前十（累计）</div>
              <Echarts :option="repairOption" height="80%" :loading="true" />
            </dv-border-box8>
          </div>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>
<style scoped lang="scss">
  ::v-deep .row-item {
    height: 60px !important;
    line-height: 60px !important;
  }

  // 3d
  .three {
    width: 100%;
    height: 100%;
  }

  .border-box8 {
    padding: 10px;
    color: #fff;
    font-weight: 700;
    overflow: hidden;
  }

  // 整体背景颜色
  .box {
    padding: 15px;
    height: 100%;
    background: url("@/assets/board/bg.png");
    background-size: 100% 100%;
    padding-bottom: 30px !important;
    // opacity: 0.9;
  }

  // 头部图片样式
  .header {
    width: 100%;
    height: 8%;
    background-image: url("@/assets/board/knheader.png");
    background-size: cover;
    background-position: -50px 0;
    text-align: center;
    position: relative;
    margin-bottom: 10px;

    //系统时间
    .time {
      position: absolute;
      top: 10%;
      left: 15px;
      font-size: 20px;
      font-weight: 600;
      color: #fff;
    }

    .home {
      position: absolute;
      top: 1%;
      right: 30px;
      font-size: 20px;
      font-weight: 600;
      color: #fff;
    }

    // 头部文字样式（仓库看板）
    .title {
      display: inline-block;
      font-size: 28px;
      font-weight: 600;
      // background: linear-gradient(
      //   92deg,
      //   #0072ff 0%,
      //   #00eaff 48.8525390625%,
      //   #01aaff 100%
      // );
      // color: transparent;
      color: #d6f9fd;
      -webkit-background-clip: text;
      background-clip: text !important;
    }
  }

  // 中间
  .main {
    display: flex;
    height: 92%;

    .title-list {
      font-size: 16px;
      font-weight: 600 !important;
      padding: 5px;
      margin-bottom: 20px;
      color: #fff;
      // background-color: #3a5cc8;
      background: linear-gradient(to right, #3a5cc8, #112572);
    }

    .main-left {
      flex: 0.6;
      height: 100%;
    }

    .main-in {
      margin: 0 20px;
      flex: 1.3;
      display: flex;
      flex-direction: column;

      .main-in-top {
        flex: 0.3;
        margin-bottom: 10px;
        display: flex;

        .main-in-top-left {
          height: 100%;
          margin-right: 20px;

          flex: 0.7;

          .echarts {
            flex: 1;
            height: 90%;
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #fff;
          }
        }

        .main-in-top-right {
          flex: 1;
          height: 100%;

          display: flex;

          .main-in-top-righ-list {
            flex: 1;
            height: 100%;
            padding-left: 20px;
            margin-right: 10px;
            background: url("@/assets/board/bk4.png") no-repeat;
            background-size: 100% 100%;
            display: flex;
            align-items: center;

            .num {
              font-size: 30px;
              color: #ffff;
            }

            .main-in-top-righ-list-title {
              padding: 0px !important;
              color: #52d1e7;
              margin-top: 20px;
            }

            .img {
              width: 60px;
              height: 60px;
              margin-right: 20px;
            }
          }

          // background-color: #0072ff;
        }

        .main-in-top-item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .title {
            display: inline-block;
            font-weight: 700;

            background: linear-gradient(92deg,
                #0072ff 0%,
                #00eaff 48.8525390625%,
                #01aaff 100%);
            font-size: 16px;
            color: transparent;
            -webkit-background-clip: text;
            background-clip: text !important;
          }
        }
      }

      .main-in-bottom {
        flex: 1;
        display: flex;

        .main-in-bottom-left {
          // height: 100%;
          padding: 10px 10px;
        }

        .main-in-bottom-right {
          // height: 100%;
          padding: 10px 10px;
        }
      }
    }
  }

  .bottom {
    height: 42%;
    margin-top: 15px;
    position: relative;
  }

  //环形进度条
  .content {
    color: #009fea;
    font-size: 24px;
    text-shadow: 0 0 3px #7acaec;
  }

  .ass {
    width: 80px;
    position: absolute;
    right: -10px;
    top: 05px;
    text-align: right;
    margin-right: 50px;
    font-size: 24px;
    color: #00eaff;
    font-weight: 600;
    z-index: 999;
  }
</style>